import React from 'react';
import {StyleSheet, View} from 'react-native';
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import Toast from 'react-native-easy-toast';

import List from './list';
import Bottom from './bottom';
import Header from '../../../components/header';
import auth from '../../../common/auth';

export default class extends React.Component {
    state = {
        status: 0,
        super_vip_number: 0,
        douya_number: 0
    };

    setMemberNumber = (super_vip_number, douya_number) => {
        this.setState({
            super_vip_number,
            douya_number
        });
    };

    //toast弹出
    showToast = (text, time = 1000) => {
        this.refs.toast.show(text, time);
    };

    componentDidMount() {
        auth.getUserInfo()
            .catch(() => {
                auth.goBack();
            });
    }

    render() {
        const {super_vip_number, douya_number} = this.state;
        return (
            <View style={styles.container}>
                <Header title="粉丝"/>
                <ScrollableTabView
                    renderTabBar={() => <ScrollableTabBar
                        tabStyle={{height: 40}}
                        style={{height: 41}}/>}
                    style={{flex: 1, marginTop: 1}}
                    tabsContainerStyle={{height: 40}}
                    tabBarBackgroundColor="#fff"
                    tabBarActiveTextColor="#ff300b"
                    tabBarInactiveTextColor="#040404"
                    tabBarUnderlineStyle={{height: 0}}
                >
                    <List member_type={1}
                          type={0}
                          showToast={this.showToast}
                          setMemberNumber={this.setMemberNumber}
                          tabLabel="全部"/>
                    <List member_type={2}
                          type={1}
                          showToast={this.showToast}
                          setMemberNumber={this.setMemberNumber}
                          tabLabel="直属粉丝"/>
                    <List member_type={3}
                          type={2}
                          showToast={this.showToast}
                          setMemberNumber={this.setMemberNumber}
                          tabLabel="推荐粉丝"/>
                </ScrollableTabView>
                <Bottom super_vip_number={super_vip_number} douya_number={douya_number}/>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1
    }
});
